<template>
  <div class="collapse-menu" @mouseenter="isShow = true" @mouseleave="isShow = false">
    <div class="menu-title"><p>{{ title }}</p></div>
    <transition name="slide-down">
      <div v-show="isShow" class="menu-wrapper">
        <ul class="menu-content">
          <li :style="{width: startSpan+'%'}"></li>
          <li v-for="item in sub"> 
            <a class="menu-item" :href="item.link">{{ item.text }}</a>
          </li>
        </ul>
      </div>
    </transition>
  </div>
</template>
<script>
export default {
  name: 'CollapseMenu',
  props: {
    title: {
      type: String,
      default: '菜单'
    },
    sub: {
      type: Object,
      default: () => ({})
    },
    startSpan:{
      type: Number,
      default: 10
    }
  },
  data() {
    return {
      isShow: false
    }
  }
}
</script>
<style lang="scss" scoped>
$height:70px;
$expand-height: 60px;

.menu-title {
  cursor: pointer;
  font-size: 1rem;
  color: var(--dg-text-color-primary);
  font-family: var(--dg-font-family);
  text-align: center;
  max-height: $height;
}

.menu-wrapper {
  position: absolute;
  width: 100vw;
  left: 0;
  overflow: hidden;
  z-index: 1000;
  height: $expand-height;
  background-color: rgb(32, 32, 32);
}

.menu-content {
  position: absolute;
  width: 100vw;
  background-color: rgb(32, 32, 32);
  height: $expand-height;
  left: 0;  
  align-items: left;
  z-index: 0;
  list-style: none;
}

.menu-content li {
  display: inline-block;
  margin: 0 30px;
}

.menu-item{
  color: var(--dg-text-color-primary);
  font-size: 1rem;
  font-family: var(--dg-font-family);
  text-decoration:none;
}

.slide-down-enter-active, .slide-down-leave-active {
  transition: all .5s ease;
}

.slide-down-enter-from, .slide-down-leave-to {
  max-height: 0;
}

.slide-down-enter-to, .slide-down-leave-from {
  max-height: $height;
}

</style>